<template>
  <div>
    <el-card shadow="never" class="d2-mb">
      <el-form
        class="filter-container"
        ref="searchData"
        :model="searchData"
        label-width="85px"
      >
        <el-row :gutter="20" style="height:30px">
          <el-col :span="5">
            <el-form-item label="策略名称">
              <el-input
                placeholder="请输入内容"
                v-model="searchData.strategy_name"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="策略ID">
              <el-input
                placeholder="请输入内容"
                v-model="searchData.strategy_id"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button
              type="primary"
              size="mini"
              @click="search"
              style="margin-top:5px"
            >
              <d2-icon name="search" /> 查询
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <div class="mb">
      <el-button type="default" size="mini" @click="add">
        <d2-icon name="plus" />
        新增
      </el-button>
      <el-button type="default" size="mini" @click="edit('alter')">
        <d2-icon name="edit" />
        修改
      </el-button>
      <el-button type="default" size="mini" icon="el-icon-delete" @click="del">
        删除
      </el-button>
      <!-- <el-button type="default" size="mini" @click="examine">
        <d2-icon name="search" />
        查看
      </el-button> -->
      <el-button type="default" size="mini" @click="exportExcel">
        <d2-icon name="upload" />
        导出
      </el-button>
      <el-button type="default" size="mini" @click="refresh">
        <d2-icon name="refresh" />
        刷新
      </el-button>
    </div>
    <el-card shadow="never" class="d2-mb">
      <el-table
        :data="tableData"
        border
        :cell-style="{ 'text-align': 'center' }"
        :header-cell-style="{
          background: '#eef1f6',
          'text-align': 'center',
          color: '#606266'
        }"
        highlight-current-row
        @row-click="handleSelectionChange"
      >
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="date" label="日期" sortable>
          <template slot-scope="scope">{{
            scope.row.date | dateYMDHMSFormat
          }}</template>
        </el-table-column>
        <el-table-column
          prop="strategy_name"
          label="策略名称"
        ></el-table-column>
        <el-table-column prop="strategy_id" label="策略ID"></el-table-column>
        <el-table-column prop="type" label="类型"></el-table-column>
        <el-table-column prop="name" label="品名"></el-table-column>
        <el-table-column
          prop="achieve_profit_loss"
          label="实现盈亏"
        ></el-table-column>
        <el-table-column
          prop="holding_profit_loss"
          label="持有盈亏"
        ></el-table-column>
      </el-table>
    </el-card>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchData.page"
      :page-size="searchData.pageSize"
      layout="total, prev, pager, next"
      :total="searchData.totalPage"
    >
    </el-pagination>
  </div>
</template>

<script>
import { profitAndLossInfo } from "@/api/url_info.js";
import { editAndLossInfo } from "@/api/url_info.js";
export default {
  //策略期初盈亏
  name: "strategiceBeginProfitAndLoss",
  components: {},
  data() {
    return {
      dialogVisible: false,
      examineVisible: false,
      searchData: {
        page: 1, //当前页
        pageSize: 20,
        totalPage: 0,
        date: "",
        strategy_name: "",
        strategy_id: "",
        type: "",
        achieve_profit_loss: "",
        holding_profit_loss: ""
      },
      tableData: [],
      // 表格选中row数据
      multipleSelection: {}
    };
  },
  created: function() {
    this.strategyInfo();
  },
  methods: {
    // 清空当前页缓存并刷新此页面
    refresh() {
      this.searchData.searchData = "";
      this.searchData.strategy_name = "";
      this.searchData.strategy_id = "";
      this.multipleSelection = "";
      this.strategyInfo();
    },
    // 每页数
    handleSizeChange(val) {
      this.searchData.pageSize = val;
      this.searchData.page = 1;
      this.strategyInfo();
    },
    // 当前页
    handleCurrentChange(val) {
      this.searchData.page = val;
      this.strategyInfo();
    },
    //查询
    search() {
      this.searchData.page = 1;
      this.strategyInfo();
    },
    //网格信息
    strategyInfo() {
      profitAndLossInfo(this.searchData)
        .then(res => {
          this.tableData = [];
          let data = res.result.results;
          this.searchData.totalPage = res.result.count;
          for (let i = 0; i < data.length; i++) {
            this.tableData[i] = {
              date: data[i]["date"],
              strategy_name: data[i]["strategy_name"],
              strategy_id: data[i]["strategy_id"],
              type: data[i]["type"],
              achieve_profit_loss: data[i]["achieve_profit_loss"],
              holding_profit_loss: data[i]["holding_profit_loss"],
              id: data[i]["id"],
              name: data[i]["name"] || data[i]["productName"],
              trade_id: data[i]["trade_id"],
              begin_flag: data[i]["begin_flag"]
            };
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    //选中的一行数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //删除
    del() {
      let that = this;
      let data = {
        operation: "DEL",
        id: that.multipleSelection.id
      };
      if (data.id) {
        if (that.multipleSelection.begin_flag == 1) {
          that.$message({
            message: "开账后数据不允许删除",
            type: "warning"
          });
        } else {
          that
            .$confirm("是否要删除？", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            })
            .then(() => {
              editAndLossInfo(data)
                .then(res => {
                  that.searchData.page = 1;
                  that.refresh();
                  that.$message({
                    message: res.result,
                    type: "success"
                  });
                })
                .catch(err => {
                  that.$message.error(err.msg);
                });
            });
        }
      } else {
        that.$message({
          message: "请选择一条数据",
          type: "warning"
        });
      }
    },
    //新增
    add() {
      this.$router.push({ path: "/profitAndLoss" });
    },
    //修改/查看
    edit(state) {
      let that = this;
      let data = that.multipleSelection;
      if (data.strategy_id) {
        if (data.begin_flag == 1) {
          that.$message({
            message: "开账后数据不允许修改",
            type: "warning"
          });
        } else {
          that.$router.push({
            path: "/ProfitAndLoss_E",
            query: { strategy_id: data.strategy_id, state: state }
          });
        }
      } else {
        that.$message({
          message: "请选择一条数据",
          type: "warning"
        });
      }
    },
    //导出
    exportExcel() {
      // this.$export.excel({
      //   columns: this.tableData.columns,
      //   data: this.tableData.data,
      //   header: '导出 Excel',
      //   merges: ['A1', 'E1']
      // })
      //   .then(() => {
      //     this.$message('导出表格成功')
      //   })
    }
  }
};
</script>
<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 15px !important;
}
</style>
